<template>
  <el-container style="height:100%;display:block">
    <div class="access-datasource-list-header">
      <div class="access-list-toolbar">
        <el-button id="access-toolbar-addds-btn" size="mini" @click="addDS">{{$t('access.addds')}}</el-button>
        <el-popover
          ref="popoverMeta"
          @after-leave="afterLeave"
          placement="top"
          width="320"
          v-model="visibleMetaCof"
        >
          <div class="popover-collection-conf">
            <span class="popover-collection-conf-title">{{$t("access.metadata_collect")}}</span>
            <el-form
              ref="collectionConf"
              :model="collectionData"
              :rules="rules"
              size="mini"
              label-position="left"
              :style="{width: '80%',padding:'10px'}"
              :hide-required-asterisk="true"
            >
              <el-row>
                <div class="collection-status-on" v-show="isOn">
                  <span class="el-icon-circle-check"></span>
                  <span id="collection-conf-start-text">{{$t('access.started')}}</span>
                  <el-button
                    id="collection-conf-pause"
                    icon="el-icon-video-pause"
                    size="mini"
                    @click="pauseCollect"
                  >{{$t('access.pause')}}</el-button>
                </div>
                <div class="collection-status-off" v-show="!isOn">
                  <span class="el-icon-video-pause"></span>
                  <span id="collection-conf-pause-text">{{$t('access.paused')}}</span>
                  <el-button
                    id="collection-conf-start"
                    icon="el-icon-video-play"
                    size="mini"
                    @click="startCollect"
                  >{{$t('access.start')}}</el-button>
                </div>
              </el-row>
              <el-form-item label="每隔" prop="interval" label-width="80px">
                <el-input v-model="collectionData.interval" clearable :style="{width: '40%'}"></el-input>
                <span class="collection-conf-text">天采集一次，</span>
              </el-form-item>
              <el-row>
                <el-form-item label="每次采集时间" prop="starttime" label-width="120px">
                  <el-time-picker
                    v-model="collectionData.starttime"
                    format="HH:mm:ss"
                    value-format="HH:mm:ss"
                    :picker-options="{'selectableRange':'00:00:00-23:59:59'}"
                    :style="{width: '100%'}"
                    placeholder="请选择每次采集时间"
                    clearable
                  ></el-time-picker>
                </el-form-item>
                <el-row>
                  <span
                    @click="showDsSellction=!showDsSellction"
                    class="collection-conf-text-title"
                  >采集范围</span>
                  <span v-show="!showDsSellction" class="el-icon-arrow-right"></span>
                  <span v-show="selectAll" class="collection-conf-selectall">(已选择所有的数据源)</span>
                </el-row>
                <el-form-item prop="collections" v-show="showDsSellction">
                  <el-checkbox
                    :indeterminate="isIndeterminate"
                    v-model="selectAll"
                    @change="handleCheckAllChange"
                  >全选</el-checkbox>
                  <div style="margin: 15px 0;"></div>
                  <el-checkbox-group v-model="checkedDs" @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="city in dsOptions" :label="city" :key="city">{{city}}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-row>
            </el-form>
            <div slot="footer" class="collection-conf-btn">
              <el-button size="mini" type="primary" plain @click="handelonfirm">{{$t("base.save")}}</el-button>
              <el-button size="mini" @click="close">{{$t("base.cancel")}}</el-button>
            </div>
          </div>
        </el-popover>
        <div id="metadata_collect_div" v-popover:popoverMeta>
          <img id="metadata_collect_img" src="../images/addds.png" />
          <span id="metadata_collect_text">{{$t('access.metadata_collect')}}</span>
        </div>
      </div>
    </div>
    <div class="access-datasource-list">
      <div class="access-sql-list">
        <div class="access-form-title">
          <span>{{$t("access.rdbm")}}</span>
        </div>
        <el-row>
          <el-table :data="tableData" stripe style="width: 100%" :show-header="false">
            <el-table-column label="img" width="200">
              <template slot-scope="scope">
                <img class="access-datasource-img" :src="getImgUrl(scope.row)" />
              </template>
            </el-table-column>
            <el-table-column label="info" width="200">
              <template slot-scope="scope">
                <p>{{ scope.row. name}}</p>
                <p>{{ scope.row.type }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="updatetime"></el-table-column>
            <el-table-column align="right">
              <template slot-scope="scope">
                <el-button-group>
                  <el-button
                    title="开始"
                    size="mini"
                    icon="el-icon-caret-right"
                    v-show="scope.row.enableCollection=='1'"
                    @click.stop="() => startOrStop(scope.row)"
                  ></el-button>
                  <el-button
                    size="mini"
                    icon="el-icon-edit-outline"
                    title="编辑"
                    @click.stop="() => edit(scope.row)"
                  ></el-button>
                  <el-button
                    size="mini"
                    title="启用"
                    icon="el-icon-unlock"
                    v-show="scope.row.enable!='1'"
                    @click.stop="() => enable(scope.row)"
                  ></el-button>
                  <el-button
                    size="mini"
                    title="禁用"
                    v-show="scope.row.enable=='1'"
                    icon="el-icon-lock"
                    @click.stop="() => enable(scope.row)"
                  ></el-button>
                  <el-button
                    size="mini"
                    title="删除"
                    icon="el-icon-delete"
                    @click.stop="() => del(scope.row)"
                  ></el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </div>
      <div class="access-form">
        <div class="access-form-title">
          <span>{{$t("access.api_ds")}}</span>
        </div>
      </div>
    </div>
  </el-container>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      //ds list
      tableData: [],
      //toolbar
      /** 是否开启收集元数据*/
      isOn: false,
      /** 是否显示采集范围*/
      showDsSellction: false,
      /** 是否选择全部数据源*/
      selectAll: true,
      isIndeterminate: true,
      /** 元数据采集配置信息*/
      collectionData: {
        interval: 1,
        starttime: "23:00:00",
        checkedDs: [],
        checkedDsIds: []
      },
      visibleMetaCof: false,
      checkedDs: [],
      /** 元数据采集范围*/
      dsOptions: [],
      dsOptionsMap: {},
      // collectionsOptions: [
      //   {
      //     label: "mysql",
      //     value: "mysql"
      //   },
      //   {
      //     label: "ERP",
      //     value: "a"
      //   }
      // ],
      rules: {
        interval: [
          {
            required: true,
            message: "",
            trigger: "blur"
          }
        ],
        starttime: [
          {
            required: true,
            message: "请选择每次采集时间",
            trigger: "change"
          }
        ],
        collections: []
      }
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.loadDSData();
  },
  methods: {
    /** 新增数据源 */
    addDS() {
      debugger;
      this.$router
        .push({
          path: "/adddatasource",
          query: {}
        })
        .catch(data => {});
    },
    /** 全选元信息采集范围事件 */
    handleCheckAllChange(val) {
      this.checkedDs = val ? this.dsOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.selectAll = checkedCount === this.dsOptions.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.dsOptions.length;
    },
    /** 暂停 全部元信息采集 */
    pauseCollect() {
      let _this = this;
      _this.isOn = false;
    },
    /** 开启 全部元信息采集 */
    startCollect() {
      let _this = this;
      _this.isOn = true;
    },
    /** 保存元信息采集配置 */
    handelonfirm() {
      this.visibleMetaCof = false;
      this.collectionData.checkedDsIds = [];
      for (let index = 0; index < this.checkedDs.length; index++) {
        debugger;
        const element = this.checkedDs[index];
        const id = this.dsOptionsMap.get(element);
        this.collectionData.checkedDsIds.push(id);
      }
      debugger;
    },
    close() {
      this.visibleMetaCof = false;
    },
    /** 元信息采集配置页面关闭后触发事件 */
    afterLeave() {
      this.checkedDs = this.collectionData.checkedDs;
      this.handleCheckedCitiesChange(this.checkedDs);
    },
    /** 开启/暂停 当前元信息采集 */
    startOrStop(row) {},
    /** 启用/禁用 当前数据源 */
    enable(row) {
      debugger;
      let _this = this;
      this.axios
        .post(this.HOST + "datasource/change-status", {
          enable: row.enable == "1" ? "0" : "1",
          id: row.id
        })
        .then(function(res) {
          if (!res.data.success) {
            _this.$alert(res.data.messagge, "提示", {
              confirmButtonText: _this.$t("base.ok")
            });
            return;
          }
          row.enable = row.enable == "1" ? "0" : "1";
          debugger;
        })
        .catch(function(err) {
          _this.$message.error(_this.$t("operation_error") + ":" + err);
        });
    },
    /** 编辑 数据源 */
    edit(row) {
      this.$router
        .push({
          path: "/editdatasource",
          query: {
            rsid: row.id,
            type: row.type
          }
        })
        .catch(data => {});
    },
    /** 删除 数据源 */
    del(row) {
      let _this = this;
      this.$confirm("此操作将永久删除该数据源连接信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          debugger;
          this.axios
            .post(this.HOST + "datasource/delete", {
              id: row.id
            })
            .then(function(res) {
              if (!res.data.success) {
                _this.$alert(res.data.messagge, "提示", {
                  confirmButtonText: this.$("base.ok")
                });
                return;
              }
              debugger;
              // _this.$message({
              //   type: "success",
              //   message: "删除成功!"
              // });
              debugger;
              _this.loadDSData();
            })
            .catch(function(err) {
              _this.$message.error(_this.$("operation_error") + ":" + err);
            });
        })
        .catch(() => {
          _this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    getImgUrl(row) {
      return require("../images/" + row.type + ".png");
    },
    loadDSData() {
      debugger;
      let _this = this;
      this.axios
        .post(this.HOST + "datasource/list", {})
        .then(function(res) {
          if (!res.data.success) {
            _this.$alert(res.data.messagge, "提示", {
              confirmButtonText: _this.$t("base.ok")
            });
            return;
          }
          _this.tableData = res.data.data;
          _this.dsOptions = [];
          _this.checkedDs = [];
          _this.collectionData.checkedDs = [];
          _this.dsOptionsMap = new Map();
          debugger;
          for (let index = 0; index < _this.tableData.length; index++) {
            const element = _this.tableData[index];
            _this.dsOptions.push(element.name);
            _this.dsOptionsMap.set(element.name, element.id);
            if (element.enableCollection == "1") {
              _this.collectionData.checkedDs.push(element.name);
              _this.checkedDs.push(element.name);
            }
            debugger;
          }
          _this.handleCheckedCitiesChange(_this.checkedDs);
        })
        .catch(function(err) {
          _this.$message.error(_this.$("operation_error") + ":" + err);
        });
    }
  }
};
</script>
<style>
.access-datasource-list {
  height: 90%;
  /* width: 100%; */
  padding: 20px;
}

.access-datasource-list .access-form {
  margin-top: 10px;
  margin-bottom: 10px;
}

.access-form-title {
  text-align: left;
  margin: 2px;
}
.access-datasource-list .access-form-title {
  margin-top: 30px;
}
.access-datasource-img {
  height: 80px;
}

.access-datasource-list-header {
  width: 100% !important;
  height: 40px !important;
  position: absolute;
  z-index: 100;
  margin-top: 5px;
}
.access-list-toolbar {
  line-height: 60px;
  text-align: start;
  /* background-color: rgba(234, 237, 241, 1); */
  height: 40px;
  width: 98%;
}
#access-toolbar-addds-btn {
  border-width: 1px;
  position: absolute;
  left: 20px;
  width: 100px;
  margin-top: 3px;
  cursor: pointer;
  background: #f9f9f9;
}
#arrow_img {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 5px;
  width: 71px;
  height: 28px;
}
#metadata_collect_div {
  border-width: 0px;
  position: absolute;
  left: 160px;
  width: 120px;
  cursor: pointer;
}
#metadata_collect_img {
  height: 30px;
  width: 30px;
}
#metadata_collect_text {
  border-width: 0px;
  position: absolute;
  white-space: nowrap;
  line-height: 50px;
  padding-left: 3px;
  word-wrap: break-word;
}
.collection-conf-text {
  color: #606266;
  padding-left: 15px;
  font-size: 14px;
  line-height: 24px;
}
.collection-conf-selectall {
  font-size: 13px;
  color: #cccccc;
  padding-left: 10px;
}
.collection-conf-text-title {
  font-size: 13px;
  color: #0099ff;
  line-height: 30px;
  cursor: pointer;
}

.collection-conf-btn {
  float: right;
}
.collection-status-on .el-icon-circle-check {
  color: green;
}
#collection-conf-pause-text {
  padding-left: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  color: red;
}
.collection-status-off .el-icon-video-pause {
  color: red;
}
#collection-conf-start-text {
  padding-left: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  color: green;
}
.popover-collection-conf > form > div:nth-child(1) {
  margin-bottom: 10px;
}
.popover-collection-conf-title {
  font-size: 14px;
  font-weight: bolder;
}
span {
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  color: #333333;
  text-align: center;
  line-height: normal;
}
</style>
